<template>
	<view class="page">
		<z-paging ref="paging" @scroll="pagScroll">
			<!-- 之后-vue3 -->
			<template #top>
				<uv-navbar :bgColor="'#fff'" autoBack :fixed="false" title="添加售后"></uv-navbar>
			</template>
			<block #refresher="{ refresherStatus }">
				<custom-refresher :status="refresherStatus" />
			</block>
			<!-- 内容 -->
			<view class="content-box">
				<uv-form labelPosition="top" :model="data.formData" :rules="data.rules" ref="form" labelWidth="auto">
					<uv-form-item label="关联项目" prop="xmType.name" required @click="showSelect('xmPicker')">
						<uv-input v-model="data.formData.xmType.name" disabled disabledColor="#ffffff" placeholder="请选择关联项目"
							border="none"></uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					
					<!-- 项目信息 -->
					<uv-collapse v-if="data.formData.xmType" :border="false" :value="data.collapse">
						<uv-collapse-item title="项目详情" :clickable="true" name="info">
							<uv-form-item label="客户经理" labelPosition="left" >
								<uv-input border="none" readonly >
									<template v-slot:suffix>{{data.formData.xmType.account_manager_name}}</template>
								</uv-input>
							</uv-form-item>
							<uv-form-item label="工程经理" labelPosition="left" >
								<uv-input border="none" readonly >
									<template v-slot:suffix>{{data.formData.xmType.engineering_manager_name}}</template>
								</uv-input>
							</uv-form-item>
							<uv-form-item label="工程监理" labelPosition="left" >
								<uv-input border="none" readonly >
									<template v-slot:suffix>{{data.formData.xmType.engineering_supervision_name}}</template>
								</uv-input>
							</uv-form-item>
							<uv-form-item label="结算完成日期" labelPosition="left" >
								<uv-input border="none" readonly >
									<template v-slot:suffix>{{data.formData.xmType.settlement_completion_date}}</template>
								</uv-input>
							</uv-form-item>
							<uv-form-item label="质保截止日期" labelPosition="left" >
								<uv-input border="none" readonly >
									<template v-slot:suffix>{{data.formData.xmType.warranty_deadline_date}}</template>
								</uv-input>
							</uv-form-item>
							<uv-form-item label="是否质保期" labelPosition="left" >
								<uv-input border="none" readonly >
									<template v-slot:suffix>{{data.formData.xmType.is_sell_by == 1 ? '是' : '否'}}</template>
								</uv-input>
							</uv-form-item>
						</uv-collapse-item>
					</uv-collapse>
					
					
					<uv-form-item label="工程监理" prop="jlType.name" required @click="showSelect('jlPicker')" v-if="data.userInfo.position_id == 2">
						<uv-input v-model="data.formData.jlType.name" disabled disabledColor="#ffffff"
							placeholder="请选择工程监理" border="none"></uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-form-item label="工程经理" prop="jlType.name" required @click="showSelect('jlPicker')" v-if="data.userInfo.position_id == 8">
						<uv-input v-model="data.formData.jlType.name" disabled disabledColor="#ffffff"
							placeholder="请选择工程经理" border="none"></uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-form-item label="内容描述" prop="desc" required>
						<uv-textarea v-model="data.formData.desc" border="none" placeholder="请输入内容描述"></uv-textarea>
					</uv-form-item>
					<uv-form-item prop="fileList">
						<template v-slot:default>
							<view class="form-item-diy" @click="showSelect('fileType')">
								<view class="dot">*</view>
								<view class="diy-label">附件(.jpg,.png,.gif,.mp4,.mp3,.zip)</view>
								<uv-icon name="plus-circle"></uv-icon>
							</view>
							<view class="file-item" v-for="(item,idx) in data.formData.fileList" :key="idx">
								<view class="file-name" v-if="item.fileType == 'image'">图片{{idx}}</view>
								<view class="file-name" v-if="item.fileType == 'video'">视频{{idx}}</view>
								<view class="file-name" v-if="item.name">{{item.name}}</view>
								<uv-icon name="close" color="#A4A4A4" @click="delFile(idx)"></uv-icon>
							</view>
						</template>
					</uv-form-item>
				</uv-form>
				<view class="submit_btn ios">
					<uv-button type="primary" text="提交" @click="submit"></uv-button>
				</view>
			</view>
			<view class="ios"></view>
		</z-paging>
		
		<!-- 关联项目 -->
		<uv-picker ref="xmPicker" :columns="data.xmColumns" keyName="name"
			@confirm="pickerConfirm($event,'xmType')"></uv-picker>
		<!-- 工程监理/经理 -->
		<uv-picker ref="jlPicker" :columns="data.jlColumns" keyName="name"
			@confirm="pickerConfirm($event,'jlType')"></uv-picker>
		<!-- 附件选择 -->
		<uv-action-sheet ref="fileType" :actions="data.fileType" cancelText="取消" @select="fileTypeChange" round></uv-action-sheet>
	</view>
</template>

<script setup>
	import { reactive, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const { proxy: that} = getCurrentInstance();

	onLoad((e) => {
		let userInfo = uni.getStorageSync('userInfo');
		console.log(userInfo.position_id);
		data.userInfo = userInfo;
		getProjectList();
		getAdminList(userInfo.position_id);
	});

	const data = reactive({
		userInfo: '',
		formData: {
			xmType: '',
			jlType: '',
			desc: '',
			fileList: [],
		},
		rules: {
			'xmType.name': {
					required: true,
					message: '请选择关联项目',
					trigger: ['blur', 'change']
			},
			'jlType.name': {
				validator: (rule, value, callback) => {
					if(!value){
						if(data.userInfo.position_id == 2){
							callback(new Error('请选择工程监理'))
						}else{
							callback(new Error('请选择工程经理'))
						}
					}else{
						callback()
					}
				},
				trigger: ['blur', 'change']
			},
			desc: {
				required: true,
				message: '请输入内容描述',
				trigger: ['change']
			},
			fileList: {
				validator: (rule, value, callback) => {
					if(value.length < 1){
						return false;
					}else{
						return true;
					}
				},
				required: true,
				message: '请上传附件',
				trigger: ['change']
			}
		},
		// 关联项目
		xmColumns: [],
		// 工程监理/经理
		jlColumns: [],
		// 附件上传类型
		fileType: [{
		  name: '图片/视频',
		  id: 1
		},{
		  name: '其他文件',
		  id: 2
		}],
	});

	// 打开选项
	const showSelect = (type) => {
		if(type == 'xmPicker'){
			if(data.xmColumns[0].length == 0){
				uni.showToast({
					title: '暂无需要售后的项目',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			data.collapse = ['info']
		}
		that.$refs[type].open();
	}
	// 选项确认
	const pickerConfirm = (e, type) => {
		console.log(e)
		data.formData[type] = e.value[0];
		that.$refs.form.validateField(`${type}.name`);
	}
	// 附件类型确认
	const fileTypeChange = (e) => {
		if(e.id == 1){
			uni.chooseMedia({
				mediaType: ['image','video'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				success(res) {
					console.log(res.tempFiles);
					res.tempFiles.map(item => {
						data.formData.fileList.push(item)
						that.$refs.form.validateField(`fileList`);
					})
				}
			})
		}else{
			wx.chooseMessageFile({
				count: 9,//限制选择的文件数量
				type: 'file',//非图片和视频的文件,不选默认为all
				extension: ['m﻿4a', 'mp3', 'zip', 'rar'],
				success (res) {
					console.log(res.tempFiles, data)
					res.tempFiles.map(item => {
						data.formData.fileList.push(item)
						that.$refs.form.validateField(`fileList`);
					})
				}
			})
		}
	}
	const delFile = (idx) => {
		data.formData.fileList.splice(idx, 1);
	}
	// 提交
	const submit = () => {
		// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
		that.$refs.form.validate().then((res) => {
			console.log(data.formData)
			uni.showLoading({
				mask: true,
				title: '信息提交中...'
			});
			let formData = data.formData
			that.$upload(formData.fileList).then((res) => {
				console.log(1111, res);
				let _form = {}
				if (data.userInfo.position_id == 2) {
					_form = {
						engineering_supervision_id: formData.jlType.id,
						engineering_supervision_name: formData.jlType.name,
					};
				} else {
					_form = {
						engineering_supervision_id: data.userInfo.id,
						engineering_supervision_name: data.userInfo.name,
						engineering_manager_id: formData.jlType.id,
						engineering_manager_name: formData.jlType.name,
					};
				}
				_form.project_id = formData.xmType.id;
				_form.after_sales_file = res.arrResult;
				_form.problem_content = formData.desc;
				console.log(_form);
				that.$hApi.wxAddAfterSales(_form).then(res => {
					console.log(res, 'wxAddAfterSales');
					uni.hideLoading();
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack();
						}, 300)
					}
					uni.showToast({
						title: res.code == 200 ? '操作成功' : res.message,
						icon: res.code == 200 ? 'success' : 'error'
					});
				}).catch((err) => {
					uni.hideLoading();
				})
				
			}).catch((err) => {
				uni.hideLoading();
			})
		}).catch((errors) => {});
	}

	// api
	const getProjectList = () => {
		that.$hApi.getAfterSalesProjects({}).then(res => {
		    console.log(res, '项目列表')
		    if (res.code == 200) {
				res.data.map(item => {
					item.name = item.project_name;
				})
				data.xmColumns = [res.data];
		    }
		})
	}
	const getAdminList = (position_id) => {
		let identity = 1
		if(position_id == 8){
			position_id = 7
			identity = 2
		}else{
			position_id = 8
		}
		that.$Api.wxGetAdminList({
			page: 1,
			num: 99,
			identity,
			position_id_arr: [position_id],
		}).then(res => {
			console.log(res, 'getAdminList');
			if(res.code == 200){
				data.jlColumns = [res.data.list]
			}
		})
	}
	
	
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>